<template>
    <div style="width: 50%;">

        <Example title="单行省略号">
            <p class="one-line-ellipsis">{{text}}</p>
        </Example>

        <Example title="多行省略号">
            <p class="more-line-ellipsis">{{text}}</p>
        </Example>

        <Example title="展开收起">
            <div class="wrap">
                <input type="checkbox" id="exp">
                <div class="text">
                    <label class="btn" for="exp"></label>
                    {{text}}
                </div>
            </div>
        </Example>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text: `说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊
            （需要计算文字宽度动态截取文本，vue-clamp就是这么做的），更别说下面的交互和判
            断逻辑了，不过经过我的一番琢磨，其实纯 CSS 也能完美实现的，下面就一步一步来看看如何实现吧~

            很多设计同学都喜欢这样的设计，把按钮放在右下角，和文本 混合 在一起，而不是单独一行，
            视觉上可能更加舒适美观。先看看多行文本截断吧，这个比较简单`
        }
    }
}
</script>

<style scoped>
.wrap {
    display: flex;
}
#exp {
    display: none;
}
.text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text::before{
    content: '';
    float: right;
    width: 0;
    height: 100%;
    margin-bottom: -21px;
}
#exp:checked+.text{
  -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
}
#exp:checked+.text .btn::after{
  content:'收起'
}
.btn {
    cursor: pointer;
    color: rgb(1, 120, 211);
    float: right;
    clear: both; /*  */
}
.btn::after{
  content:'展开' /*采用content生成*/
}

.one-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 非必须，只是为了制造一行放不下的效果 */
  /* max-width: 375px; */
}

.more-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 设置n行，也包括1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
